<template lang="html">
	<div class="">
		<!--数据的显示 表达式 和 v-text指令-->
		{{message}}
		<span v-text="info"></span>
		<!--双向数据绑定 v-mofel -->
		<input type="text" name="" id="" v-model="message"/>
		<hr />
		<!--循环数组显示数据-->
		<ul>
			<li v-for="(v,index) in lists">{{index}}------{{v.id}}------{{v.title}}</li>
		</ul>
		<hr />
		<!--触发事件-->
		<button v-on:click="go()">点击</button>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
		<!--简写 一样 -->
		<button @click="run()">重击</button>
		<hr />
	</div>
</template>

<script>
	export default{		
		data(){
			return {
					//数据
				message:'hello world',
				info:'我是Vue',
				lists:[
				     {
					   	id:1,
					   	title:'去吃饭'
				     },
				     {
				     	id:2,
				     	title:'打篮球'
				     },
					 {
					     id:3,
					     title:'打羽毛球'
				     },
			         {
					   	id:4,
					  	title:'敲代码'
					 },
					 {
					   	id:5,
			         	title:'睡觉'
		     	     }
				]
			}
		},
		methods: {
			go(){
				alerts('go go go');
			},
			run(){
				alert("run");
			}
		}
	}
</script>

<style lang="css">
	
</style>